<script setup lang="ts">
import HeaderItem from "@/layout/HeaderItem.vue";
import AsideItem from "@/layout/AsideItem.vue";
import TabsItem from "@/layout/TabsItem.vue";
import {useStyleStore} from "@/stores/style";
import FooterItem from "@/layout/FooterItem.vue";

const styleStore = useStyleStore()
const maximumNumberOfCaches = ref(4)
</script>

<template>
  <el-container>
    <el-header>
      <HeaderItem/>
    </el-header>

    <el-container>
      <el-aside :width="styleStore.asideWidth" transition-width transition-duration-200>
        <AsideItem/>
      </el-aside>
      <el-main>
        <TabsItem/>
        <RouterView v-slot="{Component}">
          <Transition name="fade">
            <KeepAlive :max="maximumNumberOfCaches">
              <component :is="Component"></component>
            </KeepAlive>
          </Transition>
        </RouterView>
        <FooterItem/>
      </el-main>
    </el-container>

  </el-container>
</template>

<style scoped>
.el-aside {
  transition: all 0.2s;
}

.fade-enter-from {
  opacity: 0;
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0)
}

.fade-enter-to {
  opacity: 1;
  -webkit-transform: translateZ(0);
  transform: translateZ(0)
}

.fade-leave-from {
  opacity: 1;
}

.fade-leave-to {
  opacity: 0;
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0)
}

.fade-enter-active, .fade-leave-active {
  transition: all 0.35s;
}

/*
等待上一帧离开动画结束后, 在开始下一帧进入动画
*/
.fade-enter-active {
  transition-delay: .325s;
}
</style>